<template>
  <div>
    <div class="nav-bar">
      <ul>
        <li
          @click="barClick(index, item)"
          v-for="(item, index) of barList"
          :key="index"
          :class="{'active': index === activeIndex}"
        >
          <div class="date">{{item.date}}</div>
          <div class="time">{{item.start}}</div>
          <div class="status">{{item.name}}</div>
        </li>
      </ul>
    </div>
    <seckill-panel :list="list" />
    <div class="loading" v-if="!list.length">
      <img src="@/assets/loading/loading.gif" alt />
      <p>正在加载...</p>
    </div>
  </div>
</template>
<script>
import { getSeckillBarList, getSeckillPartTimeList } from "@/api/seckill";
import SeckillPanel from "@/views/mall/component/seckill-panel";
const ERR_OK = 200;
export default {
  components: {
    SeckillPanel
  },
  data() {
    return {
      barList: [],
      activeIndex: 0,
      list: []
    };
  },
  created() {
    this._getSeckillBarList().then(() => {
      this._getSeckillPartTimeList(this.id);
      this.timer = setInterval(() => {
        this._getSeckillPartTimeList(this.id);
      }, 10000);
    });
  },
  destroyed() {
    this.timer && clearInterval(this.timer);
  },
  methods: {
    barClick(index, item) {
      this.activeIndex = index;
      this.id = item.seckill_id;
      this.timer && clearInterval(this.timer);
      this._getSeckillPartTimeList(item.seckill_id);
    },
    _getSeckillBarList() {
      return getSeckillBarList()
        .then(res => {
          if (res.data.code === ERR_OK) {
            this.barList = res.data.data;
            this.id = res.data.data[0].seckill_id;
            return Promise.resolve();
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    _getSeckillPartTimeList(id) {
      getSeckillPartTimeList(id).then(res => {
        if (res.data.code === ERR_OK) {
          let data = {};
          data.commodity = res.data.data.list;
          data.is_seckill = 1;
          this.list = [{ data }];
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.loading{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	img{
		width: 1rem;
		height: 1rem;
	}
	p{
		color: #ccc;
		font-size: 0.44rem;
		text-align: center;
		line-height: 0.6rem;
	}
}
.nav-bar {
  width: 100%;
  height: 2.8rem;
  background: #0084ff;
  ul {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-content: center;
    padding: 0.35rem 0;
    box-sizing: border-box;
    overflow-x: auto;
    li {
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      .date,
      .time,
      .status {
        font-size: 0.48rem;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.6);
        text-align: center;
      }
      &.active {
        .date,
        .time,
        .status {
          color: rgba(255, 255, 255, 1) !important;
        }
      }
    }
  }
}
</style>